import React, {Component} from 'react';
import {
    StyleSheet,
    Button,
    View
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import Icon from 'react-native-vector-icons/FontAwesome'
import {Dimensions} from 'react-native'

import MovieList from "./components/MovieList";
import USBox from "./components/USBox";


const deviceW = Dimensions.get('window').width

const basePx = 375

function px2dp(px) {
    return px * deviceW / basePx
}

export default class Practise extends Component {

    static navigationOptions = ({navigation}) =>{
        const {params} = navigation.state;

        return{
            title:params? params.otherParams:'豆瓣Top250',
            headerRight:(
                <Button
                    title='更多'
                    ccolor='#fff'
                    onPress={() => alert('对不起没有更多')}
                />
            )
        }
    }

    state = {
        selectedTab: 'home'
    };

    render() {
        return (
            <TabNavigator style={styles.container}>
                <TabNavigator.Item
                    selected={this.state.selectedTab === 'home'}
                    title="Home"
                    selectedTitleStyle={{color: "#3496f0"}}
                    renderIcon={() => <Icon name="home" size={px2dp(22)} color="#666"/>}
                    renderSelectedIcon={() => <Icon name="home" size={px2dp(22)} color="#3496f0"/>}
                    badgeText="1"
                    onPress={() => {this.setState({selectedTab: 'home'})
                            this.props.navigation.setParams({otherParams:'豆瓣Top250'})
                        }
                    }>
                    <MovieList {...this.props}/>
                </TabNavigator.Item>

                <TabNavigator.Item
                    selected={this.state.selectedTab === 'profile'}
                    title="Profile"
                    selectedTitleStyle={{color: "#3496f0"}}
                    renderIcon={() => <Icon name="user" size={px2dp(22)} color="#666"/>}
                    renderSelectedIcon={() => <Icon name="user" size={px2dp(22)} color="#3496f0"/>}
                    onPress={() => {this.setState({selectedTab: 'profile'})
                        this.props.navigation.setParams({otherParams:'北美电影榜单'})
                    }}>
                    <USBox {...this.props}/>
                </TabNavigator.Item>
            </TabNavigator>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});
